<template>
  <a-drawer
    title="领取记录"
    :visible="visible"
    :destroyOnClose="true"
    :width="1000"
    :body-style="{
      height: 'calc(100% - 55px)',
      boxSizing: 'border-box',
      overflow: 'auto',
    }"
    :maskClosable="true"
    @close="closeModal"
  >
    <a-row :gutter="24">
      <a-col :span="6"
        >优惠券总数量：{{ num === 0 ? "无限制" : num ? num : "" }}</a-col
      >
      <a-col :span="6">累计领取数量：{{ giveNum }}</a-col>
      <a-col :span="6">累计使用数量：{{ useNum }}</a-col>
    </a-row>

    <a-table
      :columns="columns"
      :data-source="tableList"
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
      class="mt-24"
      rowKey="id"
    >
      <template #bodyCell="{ text, record, index, column }">
        <template v-if="column.key === 'num'">
          {{ (page - 1) * limit + Number(index) + 1 }}
        </template>
      </template>
    </a-table>
  </a-drawer>
</template>

<script>
import {
  computed,
  defineComponent,
  reactive,
  ref,
  toRaw,
  toRefs,
  watch,
} from "vue";
import { Form, message, notification } from "ant-design-vue";
import request from "@/common/utils/request";
import store from "@/store";
import _ from "lodash";

export default defineComponent({
  name: "RecordList",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: 0,
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      columns: COLUMNS,
      tableList: [],
      loading: false,
      giveNum: 0,
      num: null,
      useNum: 0,
    });

    const page = ref(1);
    const limit = ref(10);
    const total = ref(0);
    const pagination = computed(() => ({
      total: total.value,
      current: page.value,
      pageSize: limit.value,
      showSizeChanger: true,
    }));

    // 触发关闭
    const closeModal = () => {
      emit("closeModal");
    };

    const getTableList = () => {
      let params = {};
      params.page = page.value;
      params.limit = limit.value;
      params.coupon_id = props.id;
      state.loading = true;
      request
        .get("/org", "/coupon/recordList", params)
        .then((res) => {
          state.tableList = res?.list || [];
          total.value = res?.total || 0;
          state.giveNum = res.giveNum;
          state.num = res.num;
          state.useNum = res.useNum;
          state.loading = false;
        })
        .catch((err) => {
          state.loading = false;
        });
    };

    const handleTableChange = (pager, filters, sorter) => {
      page.value = pager.current;
      limit.value = pager.pageSize;
      getTableList();
    };

    const init = () => {
      getTableList();
    };

    const resetData = () => {
      page.value = 1;
      limit.value = 10;
      total.value = 0;
      state.tableList = [];
      state.loading = false;
      state.giveNum = 0;
      state.num = null;
      state.useNum = 0;
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          // 打开时初始化数据
          init();
        } else {
          // 关闭时重置数据
          resetData();
        }
      }
    );
    return {
      ...toRefs(state),
      pagination,
      limit,
      page,
      closeModal,
      handleTableChange,
    };
  },
});

const COLUMNS = [
  {
    title: "序号",
    dataIndex: "index",
    key: "num",
    width: "10%",

    align: "center",
  },
  {
    title: "类型",
    dataIndex: "type",
    key: "type",
    width: "10%",
    customRender: ({ text, record, index }) => {
      return text == 1 ? "自主领取" : text == 2 ? "平台发劵" : "";
    },
    align: "center",
  },
  {
    title: "租客",
    dataIndex: "owner_name",
    key: "owner_name",
    width: "15%",
    align: "center",
  },
  {
    title: "手机号",
    dataIndex: "phone",
    key: "phone",
    width: "15%",
    customRender: ({ text, record, index }) => {
      return text || "--";
    },
    align: "center",
  },
  {
    title: "领取/发放时间",
    dataIndex: "grant_time",
    key: "grant_time",
    width: "15%",
    align: "center",
  },
  {
    title: "发放人",
    dataIndex: "cuser_name",
    key: "cuser_name",
    width: "10%",
    customRender: ({ text, record, index }) => {
      return text || "--";
    },
    align: "center",
  },
  {
    title: "使用情况",
    dataIndex: "status_txt",
    key: "status_txt",
    width: "10%",
    customRender: ({ text, record, index }) => {
      return text || "--";
    },
    align: "center",
  },
  {
    title: "使用日期",
    dataIndex: "use_time",
    key: "use_time",
    width: "15%",
    customRender: ({ text, record, index }) => {
      return text || "--";
    },
    align: "center",
  },
];
</script>

<style lang="less" scoped>
.mt-24 {
  margin-top: 24px;
}
</style>
